<template>
  <div class="plain-tabs">
    <div
      v-for="(tab, index) in tabs"
      :key="`tab-${index}`"
      :class="{ active: active == index }"
      class="plain-tabs-item"
      @click="handleClick(tab, index)"
    >
      <split-vline v-if="index > 0" class="margin-right-15" />
      {{ tab }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlainTabs',
  props: {
    onSelect: {
      type: Function,
      default: () => {}
    },
    list: {
      type: Array,
      default: () => []
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      active: 0,
      tabs: this.list
      // tabs: [
      //   '实时监测',
      //   '历史数据',
      //   '历史数据',
      //   '历史数据',
      //   '历史数据'
      // ]
    }
  },
  methods: {
    handleClick(tab, index) {
      this.active = index
      this.$emit('input', tab)
      this.onSelect(tab, index)
    }
  },
  watch: {
    value(val) {
      this.tabs.forEach((item, index) => {
        if (item === val) {
          this.active = index
        }
      })
    },
    list(val) {
      this.active = 0
      this.tabs = val
    }
  }
}
</script>

<style scoped></style>
